import React, { Component } from 'react'

// #1 点击按钮，绑定事件
// #2 让数字再原来的基础上（获取原来的数字）
// #3 +1

export default class App extends Component {
  // #1 提取 0 为状态，方便后续修改并且视图更新
  // 实例属性
  state = {
    count: 0,
  }
  // 实例方法
  // handleClick = () => {}
  // 原型方法
  handleClick() {
    // 获取原来的数字，发现 this 竟然是 undefined
    // console.log(this.state.count)
    // this 为什么是 undefined？handleClick 是一个函数，函数中的 this 谁调用就是谁
    // 期望 this 如果是 实例，其实就可以通过 this.state.count 拿到原来的数字了
    // 类内部的方法，默认也是开启了严格模式
    console.log(this.state.count)
  }
  render() {
    // #1
    /* const onClick = this.handleClick
    onClick() // window.onClick() */
    return (
      <div style={{ textAlign: 'center' }}>
        <h3>计数器：{this.state.count}</h3>
        {/* this => 实例 */}
        {/* 加括号，确实是 this 调用的，保证了 handleClick 内部的 this 是实例 */}
        {/* 但是业务错了，加括号表示上来就调用，而我点击的时候执行的 this.handleClick() 调用完毕后的返回值 */}
        {/* <button onClick={this.handleClick()}>+1</button> */}
        {/* this.handleClick 这个函数给了 onClick 这个属性，其实当咱们点击按钮的时候，是 React 内部直接调用的 onClick，等价于 #1 处的写法 */}
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
